<template>
  <div class="main">
    <div :class="['outerDiv', isIos ? 'isIos' : '']">
      <!-- <goBack :white="true" aa="./planList" :hasTitle="true" topTitle="成绩差距"></goBack> -->
      <headerBack>
        <b slot="my-center" style="font-weight:600">成绩差距</b>
      </headerBack>
      <scroller lock-x>
        <div style="margin-top: 0.8rem;">
          <div class="scoreDifference">
            <div class="headerArea">
              <div class="targetMsg">
                <div class="title">目标院校</div>
                <div class="name">{{ academyName }}</div>
              </div>
              <div class="targetMsg">
                <div class="title">目标专业</div>
                <div class="name">{{ majorName }}</div>
              </div>
              <div class="totalScore">
                <div class="enrollScore">
                  <div class="title">录取总分</div>
                  <div class="inScore">{{ inSchoolScore }}</div>
                </div>
                <div class="nowScore">
                  <div class="title">当前成绩</div>
                  <div class="inputArea"><input v-on:blur="scrolltotop" type="number" v-model="totalScore" /></div>
                </div>
              </div>
            </div>
            <div class="differentScore">
              <div class="diffArea">
                <div class="title">差距总分数</div>
                <div class="num">{{ scoreDiffer }}</div>
              </div>
            </div>
            <div class="mainContent">
              <div class="examArea" @click="showActionSheet = true">
                <div class="title">考试名称</div>
                <div :class="['clickArea', examType ? 'hasChoType' : '']">
                  <span>{{ examType ? examType : '请选择' }}</span>
                  <i></i>
                </div>
              </div>
              <div class="scoreArea">
                <div class="title">科目成绩差距分数拆解</div>
                <div class="singleScoreList">
                  <div class="singleItem">
                    <div class="course">语文</div>
                    <div class="courseInput"><input v-on:blur="scrolltotop" type="number" placeholder="请输入" v-model="chinese" /></div>
                  </div>
                  <div class="singleItem">
                    <div class="course">政治</div>
                    <div class="courseInput"><input v-on:blur="scrolltotop" type="number" placeholder="请输入" v-model="politics" /></div>
                  </div>
                  <div class="singleItem">
                    <div class="course">数学</div>
                    <div class="courseInput"><input v-on:blur="scrolltotop" type="number" placeholder="请输入" v-model="math" /></div>
                  </div>
                  <div class="singleItem">
                    <div class="course">历史</div>
                    <div class="courseInput"><input v-on:blur="scrolltotop" type="number" placeholder="请输入" v-model="history" /></div>
                  </div>
                  <div class="singleItem">
                    <div class="course">英语</div>
                    <div class="courseInput"><input v-on:blur="scrolltotop" type="number" placeholder="请输入" v-model="english" /></div>
                  </div>
                  <div class="singleItem">
                    <div class="course">地理</div>
                    <div class="courseInput"><input v-on:blur="scrolltotop" type="number" placeholder="请输入" v-model="geography" /></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="btnArea">
              <div class="saveBtn" @click="handleSaveExamMsg">保存</div>
            </div>
          </div>
          <div style="width: 100%; height: 2rem;"></div>
        </div>
      </scroller>
      <!-- 考试类型选择弹出框 -->
      <actionsheet v-model="showActionSheet" :menus="examTypeList" @on-click-menu="handleChoExamType"></actionsheet>
    </div>
  </div>  
</template>

<script>
import ls from "store2";
import { getDifference, savePerformance, getDetails, saveDifference } from "~/api/colleges";
import { Actionsheet } from 'vux'
import headerBack from "~/components/headerBack";
export default {
  components: {
    headerBack,
    Actionsheet
  },
  data() {
    return {
      majorName: '',
      academyName: '',
      totalScore: null, // 当前成绩
      inSchoolScore: 0, // 录取总分
      scoreDiffer: 0, // 成绩差距
      showActionSheet: false,
      examTypeList: ['期中考试', '期末考试', '班级考试', '年级考试', '统考', '模拟考试'],
      examType: null, // 考试类型
      chinese: 0, // 语文
      politics: 0, // 政治
      math: 0, // 数学
      history: 0, // 历史
      english: 0, // 英语
      geography: 0, // 地理
      isIos: true
    }
  },
  watch: {
    totalScore(num) {
      num = parseInt(num)
      if (num < this.inSchoolScore) {
        this.scoreDiffer = this.inSchoolScore - num
      } else {
        this.scoreDiffer = 0
      }
      if (num > 750) {
        this.totalScore = 750
      } else if (!num) {
        this.totalScore = 0
      } else {
        this.totalScore = parseInt(num)
      }
    },
    chinese(num) {
      if (num >= 150) {
        this.chinese = 150
      } else if (!num) {
        this.chinese = 0
      } else {
        this.chinese = parseInt(num)
      }
    },
    politics(num) {
      if (num >=100) {
        this.politics = 100
      } else if (!num) {
        this.politics = 0
      } else {
        this.politics = parseInt(num)
      }
    },
    math(num) {
      if (num >=150) {
        this.math = 150
      } else if (!num) {
        this.math = 0
      } else {
        this.math = parseInt(num)
      }
    },
    history(num) {
      if (num >=100) {
        this.history = 100
      } else if (!num) {
        this.history = 0
      } else {
        this.history = parseInt(num)
      }
    },
    english(num) {
      if (num >=150) {
        this.english = 150
      } else if (!num) {
        this.english = 0
      } else {
        this.english = parseInt(num)
      }
    },
    geography(num) {
      if (num >=100) {
        this.geography = 100
      } else if (!num) {
        this.geography = 0
      } else {
        this.geography = parseInt(num)
      }
    },
    
  },
  mounted() {
    this.$visit(this.$route.path)
    if (this.checkTerminal() === "ios") {
      this.isIos = true
    } else {
      this.isIos = false
    }
    this.getSxPlanDetail()
  },
  methods: {
    scrolltotop(){
      window.scroll(0,0)
    },
    // 获取成绩差距数据
    getDifferData() {
      getDifference({ userType: ls.get('userType') }).then(res => {
        // if (res.data.performance && res.data.major && res.data.academyName) {
        this.totalScore = res.data.performance
        this.majorName = res.data.major
        this.academyName = res.data.academyName
        this.inSchoolScore = res.data.point
        this.scoreDiffer = this.inSchoolScore - this.totalScore
        // } else {
        //   this.$router.back();
        // }
      }).finally(() => {
        this.$hideLoading();
      })
    },
    changeScoreRecord() {
     savePerformance({
        performance: this.totalScore,
        userType: ls.get('userType')
      }).then(() => {})
    },
    // 获取升学规划完成情况/刷新
    getSxPlanDetail() {
      this.$loading('open');
      getDetails({ userType: ls.get('userType') }).then(res => {
        this.examType = res.data.examine
        if (res.data.score) {
          const subScoreList = JSON.parse(res.data.score)
          for (const item of subScoreList) {
            if (item.name == '语文') {
              this.chinese = item.score
            } else if (item.name == '数学') {
              this.math = item.score
            } else if (item.name == '英语') {
              this.english = item.score
            } else if (item.name == '政治') {
              this.politics = item.score
            } else if (item.name == '历史') {
              this.history = item.score
            } else if (item.name == '地理') {
              this.geography = item.score
            }
          }
        }
        this.getDifferData()
      })
    },
    // 选择考试类型
    handleChoExamType(menuKey, menuItem) {
      this.examType = menuItem
    },
    handleSaveExamMsg() {
      if (this.examType) {
        if (this.scoreDiffer == 0) {
          this.chinese = 0
          this.politics = 0
          this.math = 0
          this.english = 0
          this.geography = 0
          this.history = 0
          this.saveData()
        } else {
          if ((this.chinese || this.chinese == 0) && (this.politics || this.politics == 0) && (this.math || this.math == 0) && (this.english || this.english == 0) && (this.geography || this.geography == 0) && (this.history || this.history == 0)) {
            const total = this.chinese + this.politics + this.math + this.english + this.geography + this.history
            if (total == this.scoreDiffer) {
              this.saveData()
            } else {
              this.$vux.toast.text('分数拆分不正确！');
            }
          } else {
            this.$vux.toast.text('请补充完整各科成绩！');
          }
        }
      } else {
        this.$vux.toast.text('请选择考试名称！');
      }
    },
    saveData() {
      const scoreList = [{name: '语文', score: this.chinese}, {name: '数学', score: this.math}, {name: '英语', score: this.english}, {name: '政治', score: this.politics}, {name: '历史', score: this.history}, {name: '地理', score: this.geography}]
      this.$loading('open')
      this.changeScoreRecord()
      saveDifference({
        userType: ls.get('userType'),
        difference: this.scoreDiffer,
        examine: this.examType,
        score: JSON.stringify(scoreList)
      }).then(() => {
        // this.goto('./planList')
        this.$router.back()
      }).finally(() => {
        this.$hideLoading()
      })
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
    checkTerminal() {
      var u = navigator.userAgent;
      var chrome = u.match(/Chrome\/([\d.]+)/) || u.match(/CriOS\/([\d.]+)/);
      var isWechat =
        u.toLowerCase().match(/MicroMessenger/i) == "micromessenger" ||
        u.match(/_SQ_/i) == "_sq_";
      var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/);
      var isiOS =
        !chrome && u.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/);
      if (isWechat) {
        return "wechat";
      } else if (isiOS) {
        return "ios";
      } else if (isAndroid) {
        return "android";
      }
    },
  }
}
</script>

<style lang="less" scoped>
  .isIos {
    /deep/ .weui-actionsheet__menu {
      padding-bottom: 1rem;
    }
  }
  .outerDiv {
    width: 100%;
    height: 100vh;
    background: #F7F7FA;
    position: relative;
    .scoreDifference {
      .headerArea {
        background: #fff;
        padding: 0.32rem 0.32rem 0.32rem 0.3rem;
        .targetMsg {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 0.3rem;
          line-height: 0.42rem;
          margin-bottom: 0.24rem;
          .name {
            color: #222;
            font-weight: bold;
          }
        }
        .title {
          color: #999;
          font-size: 0.3rem;
          line-height: 0.42rem;
          margin-right: 0.38rem;
        }
        .totalScore {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 0.24rem;
          border-top: 1px solid #E5E8ED;
          .enrollScore, .nowScore {
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
          .enrollScore {
            .inScore {
              color: @mainColor;
              font-size: 0.3rem;
              line-height: 0.42rem;
              font-weight: bold;
            }
          }
          .nowScore {
            .inputArea {
              input {
                width: 1.4rem;
                height: 0.64rem;
                border-radius: 0.32rem;
                text-align: center;
                border: none;
                outline: none;
                background: #F7F7FA;
                color: #222;
                font-size: 0.3rem;
                line-height: 0.42rem;
                font-weight: bold;
              }
            }
          }
        }
      }
      .differentScore {
        padding: 0.24rem 0.32rem 0.24rem 0.3rem;
        .diffArea {
          background: #fff;
          width: 100%;
          height: 1.08rem;
          padding: 0 0.28rem 0 0.26rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 0.08rem;
          font-weight: bold;
          .title {
            color: #222;
            font-size: 0.3rem;
            line-height: 0.42rem;
          }
          .num {
            color: @mainColor;
            font-size: 0.48rem;
            line-height: 0.67rem;
          }
        }
      }
      .mainContent {
        background: #fff;
        width: 100%;
        padding: 0 0.32rem 0.8rem;
        .examArea {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.35rem 0;
          border-bottom: 1px solid #E5E8ED;
          .title {
            color: #222;
            font-size: 0.3rem;
            line-height: 0.42rem;
            font-weight: bold;
          }
          .clickArea {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span {
              color: #999;
              font-size: 0.3rem;
              line-height: 0.42rem;
            }
            i {
              width: 0.4rem;
              height: 0.4rem;
                display: inline-block;
              background: url('~@/static/sprite/icon_sprites_40.png') -1.3rem -0.7rem;
              background-size:3rem 2.4rem;
              margin-left: 0.08rem;
            }
          }
          .hasChoType {
            span {
              color: #222;
            }
          }
        }
        .scoreArea {
          margin-top: 0.32rem;
          .title {
            color: #222;
            font-size: 0.3rem;
            line-height: 0.42rem;
            font-weight: bold;
            margin-bottom: 0.32rem;
          }
          .singleScoreList {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            .singleItem {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-bottom: 0.32rem;
              .course {
                color: #222;
                font-size: 0.3rem;
                line-height: 0.42rem;
                font-weight: bold;
                margin-right: 0.59rem;
              }
              .courseInput {
                input {
                  width: 1.96rem;
                  height: 0.88rem;
                  border: 1px solid #E5E8ED;
                  text-align: center;
                  color: @mainColor;
                  font-weight: bold;
                  font-size: 0.28rem;
                  border-radius: 0.1rem;
                  outline: none;
                }
              }
            }
          }
        }
      }
      .btnArea {
        width: 100%;
        padding: 0.32rem 0.64rem 1rem;
        background: #fff;
        .saveBtn {
          width: 100%;
          height: 0.88rem;
          line-height: 0.88rem;
          text-align: center;
          border-radius: 0.44rem;
          background: @mainColor;
          color: #fff;
          font-size: 0.3rem;
          font-weight: bold;
        }
      }
    }
  }  
</style>
